<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>分类：</label>
                <div class="table-query-input">
                    <el-cascader
                        placeholder="搜索"
                        :props="cateProps"
                        :options="cateList"
                        clearable
                        @change="(value) =>handleCascaderChange(queryData,'cateId',value)"
                        filterable></el-cascader>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="primary"
                icon="el-icon-thumb"
                style="margin-bottom: 2em"
                @click="clickAdd('同步视频', () => {})"
            >一键同步
            </el-button>

        </div>

        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="videoId"
                @selection-change="tableSelectionChange($event,true)"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>

                <el-table-column
                    prop="coverURL"
                    label="封面"
                    width="250"
                    align="center"
                >
                    <template slot-scope="scope">
                        <img class="aliyun-video-cover-img" title="scope.row.title" :src="scope.row.coverURL" />
                    </template>
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="视频标题"
                    width="400"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="cateName"
                    label="分类"
                    width="200"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态"
                    width="200"
                    align="center"
                >
                    <template slot-scope="scope">

                        {{ aliyunVideoStatus[scope.row.status]}}

                    </template>
                </el-table-column>
                <el-table-column
                    prop="creationTime"
                    label="创建时间"

                    align="center"
                >
                </el-table-column>

            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            custom-class="two-dialog"
        >
            <el-form
                ref="dataForm"
                :model="dataForm"
                label-width="6em"
                :rules="dataFormRule"
                class="table-edit-from"

            >
                <div class="xy-between">
                    <el-form-item label="选择科目" prop="categoryId">
                        <category-select
                            :category-id.sync="dataForm.categoryId"
                            :props="{}"
                        />
                    </el-form-item>
                    <el-form-item label="同步章节" prop="chapterId">
                        <el-cascader
                            :key="key"
                            v-model="dataForm.chapterId"
                            v-loading="chapterFlag"
                            :show-all-levels="false"
                            clearable
                            filterable
                            :props="{
                                value: 'id',
                                label: 'name',
                                checkStrictly: true
                            }"
                            :options="chapterData"
                            @change="
                               (value) =>handleCascaderChange(dataForm,'chapterId',value)
                            "
                        ></el-cascader>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="
                        videoSync()
                    "
                >同 步</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get, put, post,postForm} from "@/api/request";
import CategorySelect from "@/components/CategorySelect.vue";

export default {
    name: "AliyunVideoList",
    components: {CategorySelect},
    mixins: [TablePage],
    data() {
        let self = this;
        return {
            queryData: {
                cateId: 0
            },
            cateList:{},
            cateProps: {
                value: "cateId",
                label: "cateName",
                lazy: true,
                lazyLoad (node, resolve) {
                    if (node.value !== undefined && node.value !== null){
                        self.loadCate({cateId:node.value},(category) => {
                            if (category !== null) {
                                resolve(category)
                            }
                        });
                    }
                }
            }
        };
    },
    computed: {
        ...mapState({
            aliyunVideoStatus: state => state.status.aliyunVideoStatus,
        })
    },
    watch: {
        "dataForm.categoryId"(categoryId) {
            if (!this.dataForm.opLoading) {
                this.dataForm.parentId = null;
            }
            if (!categoryId) {
                this.chapterData = [];
            } else {
                this.key++;
                this.loadChapterTree(categoryId);
            }
        }
    },
    created() {
        this.loadCate({cateId:-1},(category) => {
            if (category !== null) {
                this.cateList = category
            }
        });
    },
    mounted() {
    },
    methods: {
        search(queryData)  {
            this.loadTable("kc/course/aliyun/video/page", queryData);
        },

        loadCate(queryData,callback)  {
            get("/kc/course/aliyun/video/cate", queryData).then(res => {
                callback(res.subCategories.category);
            });
        },

        videoSync(){
            if (this.tableSelect === null || this.tableSelect.length === 0){
                return this.$message.warning("请选择要同步的视频");
            }
            post("/kc/course/video/sync",{
                videoList: this.tableSelect,
                chapterId: this.dataForm.chapterId,
                categoryId: this.dataForm.categoryId
            }).then(res =>{
                if (res){
                    this.$message.success("同步成功");
                    this.dialogClose();
                }else{
                    this.$message.error(res.msg);
                }
            })
        }

    }
};
</script>

<style lang="scss" scoped>
.aliyun-video-cover-img{
    width: 200px;
}

</style>
